<template>
  <div>
    <van-nav-bar title="附近电站" />
<!--    <div class="top-panel">-->
<!--      <span class="city">{{city}} <van-icon class="icon" name="arrow-down" /></span>-->
<!--      <van-search class="search" v-model="keywords" @change="reload()" shape="round" placeholder="请输入搜索关键词" />-->
<!--    </div>-->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
      >
        <template #title>
          <div class="title">
            <span class="text">{{item.equipNo}}</span>
            <span class="signal">
              <Signal :value="5 * 76 / 100" style="margin-right: 3px"></Signal>
              {{item.signalIntensity}}
            </span>
          </div>
          <div class="address">{{ item.areaName}}</div>
          <ul class="info">
            <li><van-tag type="success">闲</van-tag>
              {{item.channelNum - item.usedChannels}}个</li>
            <li><van-tag type="danger">充</van-tag>
              {{item.usedChannels}}个</li>
            <li><van-tag type="primary">共</van-tag>
              {{item.channelNum}}个</li>
            <li class="distance">{{getDistance(item.lon, item.lat)}}</li>
          </ul>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import Utils from '../utils'
import wx from 'weixin-js-sdk'
import http from '../utils/request'
import { Toast } from 'vant'
const AMap = window.AMap
export default {
  name: 'NearByStation',
  data () {
    return {
      keywords: null,
      province: '河南省',
      city: '郑州',
      center: [0, 0],
      areaList: areaList,
      popupShow: false,
      page: 1,
      loading: false,
      finished: false,
      list: []
    }
  },
  created () {
    this.initPosition()
  },
  methods: {
    reload () {
      this.list = []
      this.finished = false
      this.page = 1
      this.popupShow = false
    },
    loadData () {
      if (this.center[0] === 0 && this.center[0] === 0) {
        return
      }
      this.$http.get('/restful/kxEquip/getNearPage', {
        params: {
          page: this.page,
          limit: 20,
          lon: this.center[0],
          lat: this.center[1]
        }
      }).then(res => {
        if (res.code === 'ok') {
          this.list = this.list.concat(res.data.records)
          this.finished = res.data.current >= res.data.pages
          this.page = res.data.current + 1
          this.loading = false
        }
      })
    },
    initPosition () {
      const _this = this
      if (Utils.isWeApp()) {
        http.get('/api/getWeSign?appId=' + sessionStorage.getItem('AppId') + '&url=' + location.href).then(response => {
          if (response.code === 'ok') {
            // 生成签名
            // jsapi_ticket 后台获取
            // noncestr 随机字符串
            // timestamp 当前时间戳
            // url 当前url，不算hash值
            // 按照以上顺序以键值对的形式连接起来（所有属性值均为原始值），在通过sha1加密形成签名。
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: sessionStorage.getItem('AppId'), // 必填，公众号的唯一标识
              timestamp: response.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: response.data.nonceStr, // 必填，生成签名的随机串
              signature: response.data.signature, // 必填，签名
              jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
            })
            wx.ready((res) => {
              console.log('成功')
              // 微信api定位
              wx.getLocation({
                type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
                success: function (res) {
                  _this.center = [res.longitude, res.latitude]
                  _this.loadData()
                }
              })
              // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
              // this.isWxConfig = true // 放开扫码按钮限制
            })
            wx.error((res) => {
              console.log('失败')
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查    看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            })
          } else {
            Toast(response.msg)
          }
        })
      } else {
        // 支付宝api定位
        // eslint-disable-next-line no-undef
        AlipayJSBridge.call('getCurrentLocation', { requestType: 0, bizType: '$s' }, function (result) {
          if (result.error) {
            _this.$toast.fail(result.errorMessage)
          } else {
            _this.center = [result.longitude, result.latitude]
            _this.loadData()
          }
        })
      }
    },
    getDistance (lng, lat) {
      const center = this.center
      if (!lng || !lat || !center[0] || !center[1]) return '--'

      const distance = AMap.GeometryUtil.distance(center, [lng, lat])

      if (distance > 1000000) {
        return (distance / 1000000).toFixed(2) * 1 + '千km'
      } else if (distance > 1000) {
        return (distance / 1000).toFixed(2) * 1 + 'km'
      } else {
        return (distance).toFixed(0) * 1 + 'm'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.top-panel {
  display: flex; align-items: center;
  background: #fff;
  .city {
    padding-left: 15px; padding-right: 5px;
  }
  .search {
    flex: auto;
  }
}
.title {
  font-size: 16px;
  display: flex; justify-content: space-between;
  .signal {
    display: flex; align-items: center;
  }
}
.address {
  padding: 5px 0; color: #999;
}
.info {
  display: flex; color: #999;
  li {
    display: flex; align-items: center;
    padding-right: 10px;
    line-height: 24px; font-size: 14px;
    &.distance {
      display: block;
      flex: auto;
      text-align: right;
    }
    & > span {
      margin-right: 5px;
    }
  }
}
</style>
